<template>
    <div class="inputWrap">
        <input class="myInput" type="text" :value="valueText" :placeholder="placeholder" @input="inputChange"
            @focus="inputFocus" @blur="inputBlur">
        <span v-show="clearShow" class="input-icon-close" @click="clear">X</span>
    </div>
</template>

<script setup lang='ts'>
import { ref } from "vue";

const emits = defineEmits(['update:modelValue'])
const clearShow = ref(false)
const props = defineProps({
    "placeholder": {
        type: String,
        default: '输入内容'
    },
    "modelValue": {
        type: String,
    }
})
const { placeholder } = props
const inputFocus = () => {
    clearShow.value = true
}
const inputBlur = () => {
    if (valueText.value) {
        return
    }
    clearShow.value = false
}

const clear = () => {
    valueText.value = ''
    clearShow.value = false
    emits('update:modelValue', valueText)
}
const valueText = ref()
const inputChange = (e: any) => {
    valueText.value = e.target.value
    emits('update:modelValue', valueText)
}
</script>
<style lang='scss' scoped>
.inputWrap {
    position: relative;

    .input-icon-close {
        cursor: pointer;
        position: absolute;
        position: absolute;
        right: 15px;
        top: 5px;
    }
}
</style>